<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="icon" href="../favicon.ico" />
	<title>jsx小练习</title>
</head>
<body>
	<!--  准备好一个容器 -->
	<div id="test"></div>
	
		
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom,用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel,用于将 jsx转为 js-->
	<script type="text/javascript" src="../js/babel.min.js"></script>
	
	<script type="text/babel">
	
	/**
	 * 一定注意区分：【js语句（代码）】和 【js表达式】区别
	 * 1. 表达式：一个表达式会产生一个值，放在任意一个需要值的地方
	 *		下面这些都是表达式
	 *			(1). a
	 * 			(2). a+b
	 * 			(3). demo(1)
	 * 			(4). arr.map()
	 * 			(5). function t(){}
	 * 2. 语句(代码):
	 * 		下面这些语句都是代码块
	 * 			（1）. if(){}
	 * 			（2）. for(){}
	 */
	
		const myData = '前端js框架列表'
		const data = ['Angular', 'React', 'Vue']

		//1.创建虚拟DOM
		const VDOM = (
			<div>
				<h1>
					{myData}
				</h1>
				<ul>
					<li>Angular</li>
					<li>React</li>
					<li>Vue</li>
				</ul>
				<ul>
					{
						data.map((item,index) => {
							return <li key={index}>{item}</li>
						})
					}
				</ul>
			</div>
		)
		//2. 渲染虚拟DOM到页面
		ReactDOM.render(VDOM, document.getElementById("test"))
		
		
	</script>
</body>
</html>
